<template>
    <div class="app-container">
        <div class="form-container" style="width: 500px;margin:auto;margin-top: 50px;">
            <div class="flex" style="justify-content: flex-end;">
                <el-button v-if="!edit" type="primary" icon="el-icon-edit" @click="edit=true">编辑</el-button>
                <el-button v-if="edit" type="danger" icon="el-icon-s-management" @click="save()">保存</el-button>
            </div>
            <el-form label-width="100px">
        `        <el-form-item label="公司名称">
                    <el-input v-model="company.name" disabled />
                </el-form-item>
                <el-form-item label="公司简称">
                    <el-input v-model="company.short_name" :disabled="!edit" />
                </el-form-item>
                <el-form-item label="公司地址">
                    <el-input v-model="company.address" :disabled="!edit" />
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="company.contact_phone" :disabled="!edit" />
                </el-form-item>
                <el-form-item label="联系用户">
                    <el-input v-model="company.contact_user" :disabled="!edit" />
                </el-form-item>
                <el-form-item label="到期时间">
                    <el-input v-model="company.end_date" disabled />
                </el-form-item>
                <el-form-item label="Logo">
                    <upload-image v-model="company.logo" :disabled="!edit" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="company.status" disabled>
                        <el-radio :label="0">未启用</el-radio>
                        <el-radio :label="1">启用中</el-radio>
                        <el-radio :label="2">已禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>`
        </div>
    </div>
</template>
<script>
    import UploadImage from '@/views/components/UploadImage'
    import companyApi from '@/api/company'

    export default {
        name: 'Setting1',
        components: { UploadImage },
        data() {
            return {
                edit: false,
                company: {
                    id: 0,
                    name: '',
                    short_name: '',
                    logo: '',
                    address: '',
                    contact_user: '',
                    contact_phone: '',
                    end_date: '',
                    status: 0
                }
            }
        },
        created() {
            companyApi.info().then(res => { this.company = res.data })
        },
        methods: {
            save() {
                companyApi.save(this.company).then(res => {
                    this.edit = false
                    this.$message.success('保存成功')
                    this.$store.commit('user/SET_AVATAR', this.company.logo)
                    this.$store.commit('user/SET_COMPANY_NAME', this.company.short_name)
                })
            }
        }
    }
</script>
